<template>
  <div class="userinfo">
    <div class="cart" >   
                <i class="el-icon-bangzhu"></i>
                <span>员工信息</span>
            </div>
    <div class="table_top">
      <el-input v-model="formInline.filter_parameter" @keyup.enter.native="namsss" @blur="nameSreach(formInline.filter_parameter)" size="small" prefix-icon="el-icon-search" placeholder="请输入名字查询"></el-input>
      <el-button type="primary" icon="el-icon-search" size="small"  @click="nasearch">查询</el-button>
      <el-button
        type="danger"
        icon="el-icon-plus"
        size="small"
        @click="dialogFormVisible = true"
      >新增</el-button>
      <el-upload
        class="upload-demo"
        action="/usermanage/upload/"
        :show-file-list="aaa"
        :on-success="handleAvatarSuccess"
        :before-upload="fileto"
        name="file"
            >
        <el-button type="success" icon="el-icon-folder-opened" size="small">导入</el-button>
      </el-upload>
      <el-button @click="uuuppp" type="success" size="small">确认上传 </el-button>
    </div>

    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="按区域筛选">
            <el-select size="small"  @change="areaselected(formInline.area_name)" v-model="formInline.area_name" placeholder="按区域筛选">
            <el-option 
            v-for="(item,index) in areacho"
            :key="item+index"
            :value="item.area"
            >{{item.area}}</el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="按项目筛选">
            <el-select size="small"  @change="departmentselected(formInline.project_name)" v-model="formInline.project_name" placeholder="按项目筛选">
            <el-option 
            v-for="(item,index) in selection"
            :key="item+index"
            :value="item"
            >{{item}}</el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="small" @click="choose">筛选</el-button>
            <el-button type="primary" size="small" @click="allsee">全部</el-button>
            <el-button type="warning" icon="el-icon-folder-opened" size="small" @click="exportExcel">导出当前页</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="tableData" border style="width: 100%"  v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading">
      <el-table-column fixed prop="id" label="序号" width="50"></el-table-column>
      <el-table-column fixed prop="file_number" label="档案编号" width="80"></el-table-column>
      <el-table-column fixed prop="name" label="姓名" width="80"></el-table-column>
      <el-table-column prop="area" label="区域" width="120"></el-table-column>
      <el-table-column prop="project" label="项目" width="70"></el-table-column>
      <el-table-column prop="department" label="部门" width="70"></el-table-column>
      <el-table-column prop="position" label="职位" width="120"></el-table-column>
      <el-table-column prop="job_level" label="职级" width="50"></el-table-column>
      <el-table-column prop="gender" label="性别" width="50"></el-table-column>
      <el-table-column prop="age" label="年龄" width="120"></el-table-column>
      <el-table-column prop="birthday" label="生日" width="100"></el-table-column>
      <el-table-column prop="ID_number" label="身份证" width="100"></el-table-column>
      <el-table-column prop="politics_status" label="政治面貌" width="100"></el-table-column>
      <el-table-column prop="marital_status" label="婚姻状况" width="100"></el-table-column>
      <el-table-column prop="nation" label="民族" width="100"></el-table-column>
      <el-table-column prop="native_place" label="籍贯" width="100"></el-table-column>
      <el-table-column prop="account_type" label="户口类别" width="100"></el-table-column>
      <el-table-column prop="date_of_appointment" label="担任本职务日期" width="100"></el-table-column>
      <el-table-column prop="date_on_board" label="加入公司时间" width="100"></el-table-column>
      <el-table-column prop="trial_period" label="试用期" width="100"></el-table-column>
      <el-table-column prop="join_company_date" label="加入公司时间" width="100"></el-table-column>
      <el-table-column prop="highest_education" label="最高学历" width="100"></el-table-column>
      <el-table-column prop="school_tag" label="毕业学校" width="100"></el-table-column>
      <el-table-column prop="major" label="专业" width="100"></el-table-column>
      <el-table-column prop="degree" label="学位" width="100"></el-table-column>
      <el-table-column prop="address" label="地址" width="100"></el-table-column>
      <el-table-column prop="email" label="电子邮箱" width="100"></el-table-column>
      <el-table-column prop="mobile" label="电话" width="100"></el-table-column>
      <el-table-column prop="emergency_contact" label="紧急联系人" width="100"></el-table-column>
      <el-table-column prop="emergency_call" label="紧急联系电话" width="100"></el-table-column>
      <el-table-column prop="contract_type" label="合同类型" width="100"></el-table-column>
      <el-table-column prop="contract_start_date" label="合同开始日期" width="100"></el-table-column>
      <el-table-column prop="contract_end_date" label="合同结束日期" width="100"></el-table-column>
      <el-table-column prop="sing_contract_count" label="司龄" width="100"></el-table-column>
      <el-table-column prop="now_status" label="当前状态" width="100"></el-table-column>
      <el-table-column prop="insurance_type" label="保险类型" width="100"></el-table-column>
      <el-table-column prop="is_retire" label="是否退休" width="100"></el-table-column>
      <el-table-column prop="physical_examination_record" label="体检记录" width="100"></el-table-column>
      <el-table-column prop="wages_card_number" label="工资卡" width="100"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text">编辑</el-button>
          <el-button type="text" @click="handledetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      layout=" prev, pager, next,jumper"
      :total="totalCount">
    </el-pagination>

    <!-- //新增 -->
    <el-dialog title="人员新增" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="档案编号" prop="file_number">
          <el-input v-model="ruleForm.file_number"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="区域" prop="area">
          <el-input v-model="ruleForm.area"></el-input>
        </el-form-item>
        <el-form-item label="项目" prop="project">
          <el-input v-model="ruleForm.project"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-input v-model="ruleForm.department"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-select v-model="ruleForm.position" placeholder="请选择职务">
            <el-option label="组长" value="组长"></el-option>
            <el-option label="清扫" value="清扫"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职级" prop="job_level">
          <el-select v-model="ruleForm.job_level" placeholder="请选择职级">
            <el-option label="一级管理人员" value="adminone"></el-option>
            <el-option label="一线员工" value="employ"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="ruleForm.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" required>
          <el-col :span="11">
            <el-form-item prop="birthday">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                @change="getSTime"
                placeholder="选择日期"
                v-model="ruleForm.birthday"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="身份证" prop="ID_number">
          <el-input v-model="ruleForm.ID_number"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌" prop="politics_status">
          <el-select v-model="ruleForm.politics_status" placeholder="请选择活动区域">
            <el-option label="群众" value="群众"></el-option>
            <el-option label="党员" value="党员"></el-option>
            <el-option label="积极分子" value="积极分子"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="婚姻状况" prop="marital_status">
          <el-select v-model="ruleForm.marital_status" placeholder="请选择活动区域">
            <el-option label="未婚" value="未婚"></el-option>
            <el-option label="已婚" value="已婚"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="民族" prop="nation">
          <el-input v-model="ruleForm.nation"></el-input>
        </el-form-item>
        <el-form-item label="籍贯" prop="native_place">
          <el-input v-model="ruleForm.native_place"></el-input>
        </el-form-item>
        <el-form-item label="户口类别" prop="account_type">
          <el-select v-model="ruleForm.account_type" placeholder="请选择活动区域">
            <el-option label="城镇" value="城镇"></el-option>
            <el-option label="非城镇" value="非城镇"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="担任本职务日期" required>
          <el-col :span="11">
            <el-form-item prop="date_of_appointment">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                @change="getSTime"
                placeholder="选择日期"
                v-model="ruleForm.date_of_appointment"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="加入公司时间" required>
          <el-col :span="11">
            <el-form-item prop="date_on_board">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                @change="getSTime"
                placeholder="选择日期"
                v-model="ruleForm.date_on_board"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="试用期" prop="trial_period">
          <el-input v-model="ruleForm.trial_period"></el-input>
        </el-form-item>
        <el-form-item label="最高学历" prop="highest_education">
          <el-input v-model="ruleForm.highest_education"></el-input>
        </el-form-item>
        <el-form-item label="毕业学校" prop="school_tag">
          <el-input v-model="ruleForm.school_tag"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="ruleForm.major"></el-input>
        </el-form-item>
        <el-form-item label="学位" prop="degree">
          <el-input v-model="ruleForm.degree"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人" prop="emergency_contact">
          <el-input v-model="ruleForm.emergency_contact"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系电话" prop="emergency_call">
          <el-input v-model="ruleForm.emergency_call"></el-input>
        </el-form-item>
        <el-form-item label="合同类型" prop="contract_type">
          <el-input v-model="ruleForm.contract_type"></el-input>
        </el-form-item>
        <el-form-item label="合同开始日期" required>
          <el-col :span="11">
            <el-form-item prop="contract_start_date">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                @change="getSTime"
                placeholder="选择日期"
                v-model="ruleForm.contract_start_date"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="合同结束日期" required>
          <el-col :span="11">
            <el-form-item prop="contract_end_date">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                @change="getSTime"
                placeholder="选择日期"
                v-model="ruleForm.contract_end_date"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="第几次签合同" prop="sing_contract_count">
          <el-input v-model="ruleForm.sing_contract_count"></el-input>
        </el-form-item>
        <el-form-item label="当前状态" prop="now_status">
          <el-input v-model="ruleForm.now_status"></el-input>
        </el-form-item>
        <el-form-item label="保险类型" prop="insurance_type">
          <el-input v-model="ruleForm.insurance_type"></el-input>
        </el-form-item>
        <el-form-item label="是否退休" prop="is_retire">
          <el-input v-model="ruleForm.is_retire"></el-input>
        </el-form-item>
        <el-form-item label="体检记录" prop="physical_examination_record">
          <el-input v-model="ruleForm.physical_examination_record"></el-input>
        </el-form-item>
        <el-form-item label="工资卡" prop="wages_card_number">
          <el-input v-model="ruleForm.wages_card_number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm(ruleForm)">确 定</el-button>
      </div>
    </el-dialog>

    <!-- //修改 -->
    <el-dialog title="人员修改" :visible.sync="dialogVisible">
      <el-form :model="ruleForm1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
        <el-form-item label="档案编号" prop="file_number" >
          <el-input v-model="ruleForm1.file_number" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm1.name"></el-input>
        </el-form-item>
        <el-form-item label="区域" prop="area" >
          <el-input v-model="ruleForm1.area" disabled></el-input>
        </el-form-item>
        <el-form-item label="项目" prop="project" >
          <el-input v-model="ruleForm1.project" disabled></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department" >
          <el-input v-model="ruleForm1.department" disabled></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="position" >
          <el-select v-model="ruleForm1.position" placeholder="请选择职务" disabled>
            <el-option label="组长" value="组长"></el-option>
            <el-option label="清扫" value="清扫"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职级" prop="job_level" >
          <el-select v-model="ruleForm1.job_level" placeholder="请选择职级" disabled>
            <el-option label="一级管理人员" value="adminone"></el-option>
            <el-option label="一线员工" value="employ"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="ruleForm1.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" required>
          <el-col :span="11">
            <el-form-item prop="birthday">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                @change="getSTime"
                placeholder="选择日期"
                v-model="ruleForm1.birthday"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="身份证" prop="ID_number">
          <el-input v-model="ruleForm1.ID_number"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌" prop="politics_status">
          <el-select v-model="ruleForm1.politics_status" placeholder="请选择活动区域">
            <el-option label="群众" value="群众"></el-option>
            <el-option label="党员" value="党员"></el-option>
            <el-option label="积极分子" value="积极分子"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="婚姻状况" prop="marital_status">
          <el-select v-model="ruleForm1.marital_status" placeholder="请选择活动区域">
            <el-option label="未婚" value="未婚"></el-option>
            <el-option label="已婚" value="已婚"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="民族" prop="nation">
          <el-input v-model="ruleForm1.nation"></el-input>
        </el-form-item>
        <el-form-item label="籍贯" prop="native_place">
          <el-input v-model="ruleForm1.native_place"></el-input>
        </el-form-item>
        <el-form-item label="户口类别" prop="account_type">
          <el-select v-model="ruleForm1.account_type" placeholder="请选择活动区域">
            <el-option label="城镇" value="城镇"></el-option>
            <el-option label="非城镇" value="非城镇"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="担任本职务日期" required>
          <el-col :span="11">
            <el-form-item prop="date_of_appointment">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                @change="getSTime"
                placeholder="选择日期"
                v-model="ruleForm1.date_of_appointment"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="加入公司时间" required>
          <el-col :span="11">
            <el-form-item prop="date_on_board">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                @change="getSTime"
                placeholder="选择日期"
                v-model="ruleForm1.date_on_board"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="试用期" prop="trial_period">
          <el-input v-model="ruleForm1.trial_period"></el-input>
        </el-form-item>
        <el-form-item label="最高学历" prop="highest_education">
          <el-input v-model="ruleForm1.highest_education"></el-input>
        </el-form-item>
        <el-form-item label="毕业学校" prop="school_tag">
          <el-input v-model="ruleForm1.school_tag"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="ruleForm1.major"></el-input>
        </el-form-item>
        <el-form-item label="学位" prop="degree">
          <el-input v-model="ruleForm1.degree"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="ruleForm1.address"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="ruleForm1.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="ruleForm1.mobile"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人" prop="emergency_contact">
          <el-input v-model="ruleForm1.emergency_contact"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系电话" prop="emergency_call">
          <el-input v-model="ruleForm1.emergency_call"></el-input>
        </el-form-item>
        <el-form-item label="合同类型" prop="contract_type">
          <el-input v-model="ruleForm1.contract_type"></el-input>
        </el-form-item>
        <el-form-item label="合同开始日期" required>
          <el-col :span="11">
            <el-form-item prop="contract_start_date">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                @change="getSTime"
                placeholder="选择日期"
                v-model="ruleForm1.contract_start_date"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="合同结束日期" >
          <el-col :span="11">
            <el-form-item prop="contract_end_date">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                @change="getSTime"
                placeholder="选择日期"
                v-model="ruleForm1.contract_end_date"
                style="width: 100%;"
                disabled
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="第几次签合同" prop="sing_contract_count">
          <el-input v-model="ruleForm1.sing_contract_count"></el-input>
        </el-form-item>
        <el-form-item label="当前状态" prop="now_status" >
          <el-input v-model="ruleForm1.now_status" disabled></el-input>
        </el-form-item>
        <el-form-item label="保险类型" prop="insurance_type">
          <el-input v-model="ruleForm1.insurance_type"></el-input>
        </el-form-item>
        <el-form-item label="是否退休" prop="is_retire">
          <el-input v-model="ruleForm1.is_retire"></el-input>
        </el-form-item>
        <el-form-item label="体检记录" prop="physical_examination_record">
          <el-input v-model="ruleForm1.physical_examination_record"></el-input>
        </el-form-item>
        <el-form-item label="工资卡" prop="wages_card_number">
          <el-input v-model="ruleForm1.wages_card_number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeForm(ruleForm1)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 个人详情 -->
    <el-drawer :visible.sync="drawer" :before-close="handleClose" size="50%">
      <div class="userdetail">
        <div class="detail_person">
          <h3>个人基本资料</h3>
          <table>
            <tr>
              <th>姓名</th>
              <td>{{datailFrom.name}}</td>
              <th>性别</th>
              <td>{{datailFrom.gender}}</td>
              <th>年龄</th>
              <td>{{datailFrom.age}}</td>
            </tr>
            <tr>
              <th>民族</th>
              <td>{{datailFrom.nation}}</td>
              <th>政治面貌</th>
              <td>{{datailFrom.politics_status}}</td>
              <th>婚姻状况</th>
              <td>{{datailFrom.marital_status}}</td>
            </tr>
            <tr>
              <th>身份证号</th>
              <td colspan="5">{{datailFrom.ID_number}}</td>
            </tr>
            <tr>
              <th>籍贯</th>
              <td colspan="5">{{datailFrom.native_place}}</td>
            </tr>
            <tr>
              <th>出生日期</th>
              <td>{{datailFrom.birthday}}</td>
              <th>家庭地址</th>
              <td colspan="3">{{datailFrom.address}}</td>
            </tr>
            <tr>
              <th>毕业院校</th>
              <td>{{datailFrom.school_tag}}</td>
              <th>专业</th>
              <td>{{datailFrom.major}}</td>
              <th>学历</th>
              <td>{{datailFrom.highest_education}}</td>
            </tr>
            <tr>
              <th>电子邮箱</th>
              <td>{{datailFrom.email}}</td>
              <th>职称</th>
              <td>{{datailFrom.degree}}</td>
              <th>户口类别</th>
              <td>{{datailFrom.account_type}}</td>
            </tr>
          </table>
        </div>
        <div class="detail_person">
          <h3>任职信息</h3>
          <table>
            <tr>
              <th>部门</th>
              <td>{{datailFrom.department}}</td>
              <th>职务</th>
              <td>{{datailFrom.position}}</td>
              <th>职级</th>
              <td>{{datailFrom.job_level}}</td>
            </tr>
            <tr>
              <th>入职日期</th>
              <td>{{datailFrom.date_on_board}}</td>
              <th>司龄</th>
              <td>2</td>
              <th>试用期期限</th>
              <td>{{datailFrom.trial_period}}</td>
            </tr>
            <tr>
              <th colspan="2">最近一次签合同日期</th>
              <td colspan="4">{{datailFrom.contract_start_date}}</td>
            </tr>
            <tr>
              <th colspan="2">第几次签合同</th>
              <td colspan="4">{{datailFrom.sing_contract_count}}</td>
            </tr>
            <tr>
              <th colspan="2">合同到期时间</th>
              <td colspan="4">{{datailFrom.contract_end_date}}</td>
            </tr>
          </table>
        </div>
        <div class="detail_person">
          <h3>其他信息</h3>
          <table>
            <tr>
              <th>联系电话</th>
              <td colspan="2">{{datailFrom.mobile}}</td>
              <th>备用联系方式</th>
              <td colspan="2">{{datailFrom.emergency_call}}</td>
            </tr>
            <tr>
              <th>备注</th>
              <td colspan="5">0</td>
            </tr>
          </table>
        </div>
        <div class="detail_person">
          <h3>职位变动信息</h3>
          <table>
            <tr>
              <th>序号</th>
              <th>原地区</th>
              <th>原项目</th>
              <th>原部门</th>
              <th>原职务</th>
              <th>调动日期</th>
              <th>调动地区</th>
              <th>调动项目</th>
              <th>调动部门</th>
              <th>调动职务</th>
              <th>调动原因</th>
            </tr>
            <tr v-for="(item2,index2) in datailFrom.personnel" :key="item2+index2">
              <td>{{item2.id}}</td>
              <td>{{item2.before_area}}</td>
              <td>{{item2.before_project}}</td>
              <td>{{item2.before_department}}</td>
              <td>{{item2.before_position}}</td>
              <td>{{item2.change_time}}</td>
              <td>{{item2.now_area}}</td>
              <td>{{item2.now_project}}</td>
              <td>{{item2.now_department}}</td>
              <td>{{item2.now_position}}</td>
              <td>{{item2.change_detail}}</td>
            </tr>
          </table>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { get, post  } from "../../../utils/axios.tool";
import axios from "axios";
import Qs from 'qs'
export default {
  data() {
    return {
      loading:false,
      formDate:'',
      fileList:[],
      usersid: "",
      aaa:true,
      tableData: [
        {
          id: "1",
          file_number: "1",
          name: "1",
          area: "1",
          project: "1",
          department: "1",
          position: "1",
          job_level: "",
          gender: "",
          age: "",
          birthday: "",
          ID_number: "",
          politics_status: "",
          marital_status: "",
          nation: "",
          native_place: "",
          account_type: "",
          date_of_appointment: "",
          date_on_board: "",
          trial_period: "",
          join_company_date: "",
          highest_education: "",
          school_tag: "",
          major: "",
          degree: "",
          address: "",
          email: "",
          mobile: "",
          emergency_contact: "",
          emergency_call: "",
          contract_type: "",
          contract_start_date: "",
          contract_end_date: "",
          sing_contract_count: "",
          now_status: "",
          insurance_type: "",
          is_retire: "",
          physical_examination_record: "",
          wages_card_number: ""
        }
      ],
      dialogFormVisible: false,
      dialogVisible: false,
      ruleForm: {
        file_number: "",
        name: "",
        area: "",
        project: "",
        department: "",
        position: "",
        job_level: "",
        gender: "",
        birthday: "",
        ID_number: "",
        politics_status: "",
        marital_status: "",
        nation: "",
        native_place: "",
        account_type: "",
        date_of_appointment: "",
        date_on_board: "",
        trial_period: "",
        highest_education: "",
        school_tag: "",
        major: "",
        degree: "",
        address: "",
        email: "",
        mobile: "",
        emergency_contact: "",
        emergency_call: "",
        contract_type: "",
        contract_start_date: "",
        contract_end_date: "",
        sing_contract_count: "",
        now_status: "",
        insurance_type: "",
        is_retire: "",
        physical_examination_record: "",
        wages_card_number: ""
      },
      ruleForm1: {
        file_number: "",
        name: "",
        area: "",
        project: "",
        department: "",
        position: "",
        job_level: "",
        gender: "",
        birthday: "",
        ID_number: "",
        politics_status: "",
        marital_status: "",
        nation: "",
        native_place: "",
        account_type: "",
        date_of_appointment: "",
        date_on_board: "",
        trial_period: "",
        highest_education: "",
        school_tag: "",
        major: "",
        degree: "",
        address: "",
        email: "",
        mobile: "",
        emergency_contact: "",
        emergency_call: "",
        contract_type: "",
        contract_start_date: "",
        contract_end_date: "",
        sing_contract_count: "",
        now_status: "",
        insurance_type: "",
        is_retire: "",
        physical_examination_record: "",
        wages_card_number: ""
      },
      datailFrom:{
        name:'',
        gender:'',
        age:'',
        nation:'',
        politics_status:'',
        marital_status:'',
        ID_number:'',
        native_place:'',
        birthday:'',
        address:'',
        school_tag:'',
        major:'',
        highest_education:'',
        email:'',
        degree:'',
        account_type:'',
        department:'',
        position:'',
        job_level:'',
        date_on_board:'',
        trial_period:'',
        contract_start_date:'',
        sing_contract_count:'',
        contract_end_date:'',
        emergency_call:'',
        mobile:'',
        personnel:[]
      },
      drawer: false,
      direction: "we",
      formInline: {
          area_name: '',
          project_name: '',
          filter_parameter: "",
      },
      pagesize:10,
      currentPage:1,
      totalCount:1,
      areacho:[],
      // rules: {
      //   name: [
      //     { required: true, message: '请输入活动名称', trigger: 'blur' },
      //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      //   ],
      // }
    };
  },
  methods: {
    fileto(file){
      this.formData = new FormData();
      this.formData.append("file", file);
    },
    uuuppp(){
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      let url = '/usermanage/upload/'
      axios
        .post(url, this.formData,config)
        .then(res=>{
          this.$message('导入成功')
          this.getData()
          let that = this
          that.aaa=false
        })
        .catch(err=>{
          this.$message('导入失败')
        })
    },
    handleAvatarSuccess(res, file) {
    },
    handleClick(row) {
      this.dialogVisible = true;
      this.ruleForm1 = row;
      this.usersid = Number(row.id);
    },
    getSTime(val) {
      this.ruleForm.birthday = val;
    },
    submitForm(formName) {
      let {file_number,name,area,project,department,position,job_level,gender,birthday,ID_number,politics_status,marital_status,nation,native_place,account_type,date_of_appointment,date_on_board,trial_period,highest_education,school_tag,major,degree,address,email,mobile,emergency_contact,emergency_call,contract_type,contract_start_date,contract_end_date,sing_contract_count,now_status,insurance_type,is_retire,physical_examination_record,wages_card_number
      } = this.ruleForm;
      let url = "/usermanage/staffs/";
      this.$axios.post(url, this.ruleForm).then(res => {
        this.dialogFormVisible = false;
        this.$message("添加成功");
        this.getData();
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    changeForm() {
      let id = this.usersid;
      let url = `/usermanage/staffs/${id}/`
      Qs.stringify(this.ruleForm1)
      let sessionId = localStorage.getItem("sessionId");
      let Authorization =  `JWT ${sessionId}`;
      axios.put(url,Qs.parse(this.ruleForm1),{headers:{
          'Authorization':Authorization
        }
      }).then(res=>{
        this.dialogVisible = false;
        this.$message("修改成功");
        this.getData()
      })     
    },
    handledetail(row) {
      this.drawer = true;
      this.usersid = Number(row.id);
      let id = this.usersid
      let url = `/usermanage/staffs/${id}/`
      this.$axios.get(url).then(res=>{
        this.datailFrom = res[0]
      })
    },
    getData(){
      this.loading = true
      let page_size = this.pagesize
      let page = this.currentPage
      let url = `/usermanage/staffs/?page=${page}&page_size=${page_size}`;
      this.$axios.get(url).then(res => {
        this.tableData = res.results;
        this.totalCount = res.count
        this.loading = false
      });
    },
    //每页显示的条数
    // handleSizeChange(val){
    //   this.formInline.pagesize = val
    // },
    //显示第几页
    handleCurrentChange(val){
      this.currentPage = val
      let page_size = this.pagesize
      let page = this.currentPage
      let url = `/usermanage/staffs/?page=${page}&page_size=${page_size}`;
      this.$axios.get(url,this.formInline).then(res => {
        this.tableData = res.results;
        this.totalCount = res.count
      });
    },
    allsee(){
      this.formInline.area_name = ''
      this.formInline.project_name = ''
      this.formInline.filter_parameter = ''
      this.getData()
    },
    nameSreach(val){
      this.formInline.filter_parameter = val
    },
    nasearch(){
      if(this.formInline.filter_parameter==''){
        this.getData()
      }
      else{
        let page_size = this.pagesize
        this.currentPage = 1
        let page = this.currentPage
        let url = `/usermanage/staffs/?page=${page}&page_size=${page_size}`;
        this.$axios.get(url,this.formInline).then(res => {
          this.tableData = res.results;
          this.totalCount = res.count
        });
      }
    },
    namsss(){
      this.nasearch()
    },
    areaselected(val){
      this.formInline.area_name = val
      this.formInline.project_name = ''
    },
    departmentselected(val){
      this.formInline.project_name = val
    },
    choose(){
      this.loading =true
      let page_size = this.pagesize
      this.currentPage = 1
      let page = this.currentPage
      let url = `/usermanage/staffs/?page=${page}&page_size=${page_size}`;
      this.$axios.get(url,this.formInline).then(res => {
        this.tableData = res.results;
        this.totalCount = res.count
        this.loading = false
      });
    },
    areachoose(){
      let url='/usermanage/area/'
      this.$axios.get(url).then(res=>{
        this.areacho = res.data
      })
    },
    exportExcel() {　//兼容ie10哦！
      　　require.ensure([], () => {　　　　　　　　
          const { export_json_to_excel } = require('../../../vendor/Export2Excel');　　//引入文件　　　　　　
          const tHeader = ['序号', '档案编号', '姓名', '区域', '项目', '部门', '职位', '职级', '性别', '年龄', '生日', '身份证', '政治面貌', '婚姻状况', '民族', '籍贯', '户口类别', '加入公司时间', '试用期', '加入公司时间', '最高学历', '毕业学校', '专业', '学位', '地址', '电子邮箱', '招聘完成率', '电话', '紧急联系人', '紧急联系电话', '合同类型', '合同开始日期', '合同结束日期', '司龄', '当前状态', '保险类型', '是否退休', '体检记录', '工资卡']; //将对应的属性名转换成中文
          const filterVal = ['id', 'file_number', 'name', 'area', 'resume_count', 'project', 'department', 'position', 'job_level', 'gender', 'age', 'birthday', 'ID_number', 'politics_status', 'marital_status','nation','native_place','account_type','date_of_appointment','date_on_board','trial_period','join_company_date','highest_education','school_tag','major','degree','address','email','mobile','emergency_contact','emergency_call','contract_type','contract_start_date','contract_end_date','sing_contract_count','now_status','insurance_type','is_retire','physical_examination_record','wages_card_number'];//table表格中对应的属性名　　　　　 　　　
          const list = this.tableData;　　//想要导出的数据　　　　　　
          const data = this.formatJson(filterVal, list);　　　　　　　　
          export_json_to_excel(tHeader, data, '员工信息表');
          })
      },
      formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]));
      },
  },
  mounted() {
    this.getData();
    this.areachoose()
  },
  computed : {
        selection :function(){
            for(var i = 0; i < this.areacho.length; i++){
                if(this.areacho[i].area == this.formInline.area_name){
                    return this.areacho[i].project;
                }
            }
        },
   }
};
</script>

<style lang="less">
.userinfo {
  .cart{
            width: 20%;
            margin-bottom: 30px;
            i{
                font-size: 20px;
                margin-right: 8px;
                color: gray;
            }
            span{
                font-size: 15px;
                color: gray;
                font-weight: bold;
            }
        }
  .table_top {
    .el-input {
      width: 20%;
      margin-right: 10px;
      margin-bottom: 50px;
    }
    .el-input__inner {
      font-weight: bold;
    }
  }
  .el-button--small,
  .el-button--small.is-round {
    margin-right: 100px;
  }
  .el-pagination {
    display: flex;
    justify-content: center;
  }
  .el-drawer__body {
    overflow-x: scroll;
  }
  .el-dialog {
    margin-top: 3vh !important;
  }
  .userdetail{
    width: 100%;
    .detail_person{
        margin-bottom: 35px;
    }
    h3{
        text-align: center;
        margin: 0;
        padding: 12px;
        border-top: 1px solid;
        border-left: 1px solid;
        border-right: 1px solid;
        margin-right: 1px;
    }
    table, th , td  {
      border: 1px solid grey;
      border-collapse: collapse;
      padding: 5px;
      text-align: center;
      padding: 10px;
    }
    table{
        width: 100%;
    }
    th{
        background: gainsboro;
    }
  }
  .upload-demo{
    display: inline-block;
  }
}
</style>